<template>
  <div>
    <div style="border: 1px solid #ccc;">
      <!-- 工具栏 -->
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor-id="editorId"
        :default-config="toolbarConfig"
        :mode="mode"
      />

      <!-- 编辑器 -->
      <Editor
        style="height: 500px"

        :editor-id="editorId"

        :default-config="editorConfig"
        :default-content="getDefaultContent"
        :mode="mode"

        @onCreated="onCreated"
        @onChange="onChange"
        @onDestroyed="onDestroyed"
        @onMaxLength="onMaxLength"
        @onFocus="onFocus"
        @onBlur="onBlur"
        @customAlert="customAlert"
        @customPaste="customPaste"
      />
    </div>
  </div>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css'
import { Editor, Toolbar, getEditor, removeEditor } from '@wangeditor/editor-for-vue'
import cloneDeep from 'lodash.clonedeep'

export default {
  name: 'WangEditorV5',
  components: { Editor, Toolbar },
  props: {
    editorId: {
      type: String,
      default: 'wjEditor'
    }
  },
  data: function() {
    return {
      // 【特别注意】
      // 1. editorId Toolbar 和 Editor 的关联，要保持一致
      // 2. 多个编辑器时，每个的 editorId 要唯一

      toolbarConfig: { /* 工具栏配置 */ },
      defaultContent: [
        {
          type: 'paragraph',
          children: [{ text: '一行文字' }]
        }
      ],
      editorConfig: {
        placeholder: '请输入内容...'
        // 其他编辑器配置
        // 菜单配置
      },
      mode: 'simple', // or 'simple'
      curContent: []
    }
  },
  computed: {
    // 注意，深度拷贝 content ，否则会报错
    getDefaultContent() {
      return cloneDeep(this.defaultContent)
    }
  },
  watch: {
  },
  created: function() {

  },
  mounted() {
  },
  beforeDestroy() {
    const editor = getEditor(this.editorId)
    if (editor == null) return

    // 销毁，并移除 editor
    editor.destroy()
    removeEditor(this.editorId)
  },
  methods: {
    onCreated(editor) {
      console.log('onCreated', editor);
    },
    onChange(editor) {
      console.log('onChange', editor.children);
      this.curContent = editor.children
    },
    onDestroyed(editor) {
      console.log('onDestroyed', editor)
    },
    onMaxLength(editor) {
      console.log('onMaxLength', editor)
    },
    onFocus(editor) {
      console.log('onFocus', editor)
    },
    onBlur(editor) {
      console.log('onBlur', editor)
    },
    customAlert(info, type) {
      window.alert(`customAlert in Vue demo\n${type}:\n${info}`)
    },
    customPaste(editor, event, callback) {
      console.log('ClipboardEvent 粘贴事件对象', event)
      const clipboardData = event.clipboardData || event.originalEvent.clipboardData
      const items = clipboardData.items;
      if (items.length > 0 && items[1].kind === 'string') {
        items[1].getAsString(function(e) {
          console.log(e)
        })
      }
      // 自定义插入内容
      // editor.insertText('xxx')

      // 返回值（注意，vue 事件的返回值，不能用 return）
      // callback(false) // 返回 false ，阻止默认粘贴行为
      callback(true) // 返回 true ，继续默认的粘贴行为
    }
  }
}
</script>
